<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="head :: commonHead('填写订单')"></head>

<body>

<style>
    .el-form-item {
        margin-bottom: 0;
    }
    .Photograph {
        display: none;
    }
</style>

<div th:replace="head :: header"></div>

<!-- 主体内容 -->
<div id="app">
    <div class="user_container clearfix">

        <!--/* 异常消息 */-->
        <el-alert th:if="${error ne null}" th:title="${error}" type="error"></el-alert>

        <div class="right_boxwrap order_boxwrap">
            <div class="user_right_box">
                <div class="user_right_box_title">
                    <div class="user_right_box_title_l">
                        <em></em>
                        <h3 th:text="${(type eq 1 ? '同款' : '私人定制') + '订单'}"></h3>
                    </div>
                </div>
                <div class="user_info order_info">
                    <el-form id="submitForm" :model="form" :rules="rules" ref="ruleForm" th:action="@{/order/create}" method="post">

                        <div class="middle">
                            <!--/* 拍摄信息 */-->
                            <div class="middle_box">
                                <div class="middle_box_title">
                                    <h3>拍摄信息</h3>
                                </div>

                                <div class="middle_box_con">
                                    <input type="hidden" name="_csrf" th:value="${_csrf.token}">
                                    <input type="hidden" name="type" th:value="${type}">
                                    <input type="hidden" name="theSameStyleId" th:value="${video ne null ? video.id : ''}">
                                    <input type="hidden" name="photographer" th:value="${photoGrapher.id}">
                                    <input type="hidden" name="scriptwriter" th:value="${scriptWriter.id}">

                                    <div class="table">
                                        <input type="hidden" name="location" v-model="form.location">
                                        <el-form-item label="拍 摄 地：" prop="location">
                                            <el-select v-model="form.location" placeholder="请选择" @change="comboChange">
                                                <el-option v-for="item in place" :key="item.id" :label="item.name" :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                    <div class="table">
                                        <input type="hidden" name="executeDates" v-model="form.executeDates">
                                        <el-form-item label="拍摄档期：" prop="executeDates">
                                            <!--<el-date-daterangepicker v-model="form.executeDate" type="date" placeholder="选择日期"> </el-date-daterangepicker>-->
                                            <el-date-picker v-model="form.executeDates" type="daterange" range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="executePicker">
                                            </el-date-picker>
                                        </el-form-item>

                                        <div class="right" style="display: inline-block;">
                                            注：此档期是您预计拍摄时间，前7天客服会与您沟通拍摄和剧本，具体档期以与客服沟通时间为准。
                                        </div>
                                    </div>
                                    <div class="table">
                                        <div class="left">
                                            备 注：
                                        </div>
                                        <div class="textarea">
                                            <textarea name="remark" v-model="form.remark" @input="remarkValid" placeholder="备注内容300字以内"></textarea>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <!--/* 作品信息 */-->
                            <div class="middle_box">
                                <div class="middle_box_title">
                                    <h3>作品信息</h3>
                                </div>
                                <div class="middle_box_con">
                                    <div class="table">
                                        <div class="left">作品标题：</div>
                                        <p style="width:80%;" th:if="${video ne null}" th:text="${video.name}"></p>
                                        <p style="width:80%;" th:if="${video eq null}">私人定制作品</p>
                                    </div>
                                    <div class="table">
                                        <div class="left">作品简介：</div>
                                        <p style="width:80%;" th:if="${video ne null}" th:text="${video.description}"></p>
                                        <p style="width:80%;" th:if="${video eq null}" th:text="${currentUser.nickname + ' 的私人定制作品'}"></p>
                                    </div>

                                    <!--/* 私人订制和宣传片不显示摄影师、编剧 */-->
                                    <div class="table">
                                        <div class="left">摄 影 师 ：</div>
                                        <p style="width:80%;" th:if="${type eq 1}">待分配</p>
                                        <p style="width:80%;" th:if="${type eq 2}">[[${photoGrapher?.nickname}]]</p>
                                    </div>
                                    <!--/* 私人订制和宣传片不显示摄影师、编剧 */-->
                                    <div class="table">
                                        <div class="left">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;剧 ：</div>
                                        <p style="width:80%; margin-left: 2px;" th:if="${type eq 1}">待分配</p>
                                        <p style="width:80%; margin-left: 2px;" th:if="${type eq 2}">[[${scriptWriter?.nickname}]]</p>
                                    </div>

                                    <!--/* 同款订单作品类型不允许修改 */-->
                                    <div class="table" th:if="${type ne 2}">
                                        <input type="hidden" name="videoType" v-model="form.videoType">
                                        <div class="left">作品类型：</div>
                                        <p style="width:80%; margin-left: 2px;" cus:dict="video-type,${video.type}"></p>
                                    </div>

                                    <!--/* 私人订制作品类型可选 */-->
                                    <div class="table" th:if="${type eq 2}">
                                        <input type="hidden" name="videoType" v-model="form.videoType">
                                        <el-form-item label="作品类型：" prop="videoType">
                                            <el-select v-model="form.videoType" placeholder="请选择">
                                                <el-option v-for="(item, index) in videoTypes" :key="item.id" :label="item.name" :value="item.value"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>

                                    <!--/* 订单类型为私人订制, 或者作品类型为宣传片, 不显示套餐 */-->
                                    <div class="table" th:if="${!(type eq 2 or video.type eq 4)}">
                                        <div class="left">
                                            <p>基础套餐：</p>
                                        </div>
                                        <input type="hidden" name="combo" v-model="form.combo">

                                        <a href="javascript:void(0)" class="fw_content_btn" @click="comboShow = true">{{comboIcon == 1 ? '套餐A' : (comboIcon == 2 ? '套餐B' : (comboIcon == 3 ? '套餐C' : (comboIcon == 4 ? '套餐D' : '点击选择套餐服务')))}}</a>
                                        <div class="ts_textwrap">
                                            <i class="iconfont icon-iconfontwenhao1" style="color: #a0a0a0;"></i>
                                            <div class="ts_text">
                                                <p style="font-size: 14px;">如果选择任意基础套餐，则只收取基础费用；如果选择私人定制，将按套餐费用收取</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!--/* 私人定制套餐 */-->
                                    <div class="table" th:if="${type eq 2}">
                                        <div class="left">
                                            <p>套餐信息：</p>
                                        </div>
                                        <p>私人定制套餐, 稍候客服会与您联系, 沟通详细要求!</p>
                                    </div>
                                </div>
                            </div>

                            <!--/* 新发票 */-->
                            <div class="middle_box">
                                <div class="middle_box_title">
                                    <h3>发票信息：</h3>
                                </div>
                                <div class="invoice_content">
                                    <div class="invoice_top middle_box_con clearfix">
                                        <div class="left" style="margin-right: 48px;">
                                            是否需要发票
                                        </div>
                                        <div class="right table">
                                            <div class="sex">

                                                <label style="margin-right: 58px;">
                                                    <input name="needReceipt" type="radio" value='true' v-model="form.needReceipt"/>
                                                    <span style="display: inline-block;margin-left: 30px;" @click="form.needReceipt = 'true'">需要</span>
                                                </label>
                                                <label>
                                                    <input name="needReceipt" type="radio" value='false' v-model="form.needReceipt"/>
                                                    <span style="display: inline-block;margin-left: 30px;" @click="form.needReceipt = 'false'">不需要</span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="invoice_table my_invoice_table" style="padding-bottom: 30px;" key="1" v-show="form.needReceipt == 'true'">
                                        <table border="0" cellspacing="0" cellpadding="0">

                                            <tr>
                                                <th>发票类型：</th>
                                                <td>
                                                    <div class="text" style="margin-top: 8px;">
                                                        <input type="hidden" name="receiptType" v-model="form.receiptType">
                                                        <el-form-item label="" prop="receiptType">
                                                            <el-select v-model="form.receiptType" placeholder="请选择">
                                                                <el-option v-for="item in receiptTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                                            </el-select>
                                                        </el-form-item>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th>发票抬头：</th>
                                                <td class="middle_box_con">
                                                    <div class="sex table" style="margin:10px 0;">
                                                        <label class="geren_dx" style="margin-right: 58px;">
                                                            <input name="receiptHeadType" type="radio" value="1" v-model="form.receiptHeadType"/>
                                                            <span style="display: inline-block; margin-left: 30px;">个人</span>
                                                        </label>
                                                        <label class="gongsi_dx">
                                                            <input name="receiptHeadType" type="radio" value="2" v-model="form.receiptHeadType"/>
                                                            <span style="display: inline-block; margin-left: 30px;">单位</span>
                                                        </label>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th>发票内容：</th>
                                                <td>
                                                    <div class="text">
                                                        <input type="text" name="receiptContent" v-model="form.receiptContent" readonly placeholder="发票内容"/>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr v-show="form.receiptHeadType == 2">
                                                <th>公司名称：</th>
                                                <td>
                                                    <div class="text">
                                                        <el-form-item label="" prop="receiptHead">
                                                            <input type="text" name="receiptHead" v-model="form.receiptHead" placeholder="公司名称"/>
                                                            <span v-for="item in errors" v-if="item.key == 'unitName'" class="error_text">{{item.value}}</span>
                                                        </el-form-item>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr v-show="form.receiptHeadType == 2">
                                                <th>发票税号：</th>
                                                <td>
                                                    <div class="text">
                                                        <el-form-item label="" prop="dutyNo">
                                                            <input type="text" name="dutyNo" v-model="form.dutyNo" placeholder="发票税号"/>
                                                            <span v-for="item in errors" v-if="item.key == 'dutyNo'" class="error_text">{{item.value}}</span>
                                                        </el-form-item>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr v-show="form.receiptType == 2">
                                                <th>收票邮箱：</th>
                                                <td>
                                                    <div class="text">
                                                        <el-form-item label="" prop="contactEmail">
                                                            <input type="text" name="contactEmail" v-model="form.contactEmail" placeholder="收票邮箱"/>
                                                            <span v-for="item in errors" v-if="item.key == 'contactEmail'" class="error_text">{{item.value}}</span>
                                                        </el-form-item>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <th valign="top" style="padding-top: 10px;">收票人信息：</th>
                                                <td>
                                                    <div class="text text_sp clearfix" style="margin-bottom: 12px;">
                                                        <el-form-item label="" prop="receiveName" style="display: inline-block;">
                                                            <input name="receiveName" type="text" style="margin-right: 16px;" placeholder="收票人姓名" v-model="form.receiveName"/>
                                                            <span v-for="item in errors"  v-if="item.key == 'receiveName'" class="error_text">{{item.value}}</span>
                                                        </el-form-item>

                                                        <el-form-item label="" prop="contactPhone" style="display: inline-block;">
                                                            <input name="contactPhone" type="text" style="margin-right: 16px;" placeholder="联系电话" v-model="form.contactPhone"/>
                                                            <span v-for="item in errors" v-if="item.key == 'contactPhone'" class="error_text">{{item.value}}</span>
                                                        </el-form-item>
                                                    </div>

                                                    <div class="text" style="height: 40px; margin-bottom: 12px;" v-show="form.receiptType == 1">
                                                        <input type="hidden" name="postAddress" v-model="form.postAddress">
                                                        <el-cascader placeholder="选择城市" expand-trigger="hover" :options="areas" v-model="form.postAddress"></el-cascader>
                                                    </div>
                                                    <div class="text">
                                                        <el-form-item label="" prop="postStreet" v-show="form.receiptType == 1">
                                                            <textarea name="postStreet" v-model="form.postStreet" @input="streetValid" placeholder="填写街道地址, 100字以内"></textarea>
                                                            <span v-for="item in errors" v-if="item.key == 'postAddress'" class="error_text">{{item.value}}</span>
                                                        </el-form-item>
                                                    </div>
                                                </td>
                                            </tr>

                                            <!--/* 如果是同款作品, 并且是宣传片, 则不显示金钱信息 2019-01-08 */-->
                                            <tr th:if="${video eq null or video.type ne 4}">
                                                <th valign="top">发票金额：</th>
                                                <td>
                                                    <div class="text">
                                                        ￥{{(comboColumnList != null && comboColumnList[comboIcon - 1] != null ? comboColumnList[comboIcon - 1].price : 0)|Money}}元
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!--/* 优惠券 */-->
                            <div class="middle_box">
                                <div class="middle_box_title">
                                    <h3>优惠券信息</h3>
                                </div>
                                <div class="middle_box_con">
                                    <div class="table">
                                        <div class="left">
                                            优 惠 券：
                                        </div>
                                        <input type="hidden" name="discountcouponId" v-model="form.discountcouponId">
                                        <el-select v-model="discountCouponIndex" v-index placeholder="选择优惠券" @change="discountCouponChange">
                                            <el-option label="不使用优惠券" value=""></el-option>
                                            <el-option v-for="(item, index) in coupons" :key="index" :label="item.price" :value="index"></el-option>
                                        </el-select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--/* 表单底部 协议 金额结算 */-->
                        <div class="invoice_bottom clearfix">
                            <div class="left">
                                <input type="hidden" name="agree" :value="form.agree.length > 0">
                                <el-form-item label="" prop="agree">
                                    <el-checkbox-group v-model="form.agree" style="display: inline;">
                                        <el-checkbox label="同意短视频购买协议" value="true"></el-checkbox>
                                    </el-checkbox-group>
                                    <a style="margin-left: -30px; margin-top: -4px;" th:href="@{'/brand?type=platform&m=1'}" target="_blank">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;《点击阅读协议》</a>
                                </el-form-item>

                                <p style="color: #ff5722;">注：此档期是您预计拍摄时间，前7天客服会与您沟通拍摄和剧本，具体档期以与客服沟通时间为准。</p>
                            </div>
                            <div class="right">
                                <!--/* 如果是同款作品, 并且是宣传片, 则不显示金钱信息 2019-01-08 */-->
                                <ul th:if="${video eq null or video.type ne 4}">
                                    <li>商品总额：￥{{(comboColumnList != null && comboColumnList[comboIcon - 1] != null ? comboColumnList[comboIcon - 1].price : 0)|Money}}</li>
                                    <li>发票运费：￥22.00</li>
                                    <li>优惠：-￥{{(coupons[discountCouponIndex] != null ?
                                        coupons[discountCouponIndex].price : 0)|Money}}
                                    </li>
                                    <li>应付金额：￥{{((coupons[discountCouponIndex] != null ? coupons[discountCouponIndex].price : 0) + (comboColumnList != null && comboColumnList[comboIcon - 1] != null ? comboColumnList[comboIcon - 1].price + 22 : 0))|Money}}
                                    </li>
                                </ul>
                                <div class="invoice_bottom_btn">
                                    <input type="button" @click="submit('ruleForm')" value="提交订单"/>
                                </div>
                            </div>
                        </div>

                    </el-form>

                </div>
            </div>
        </div>
    </div>


    <!-- 套餐表格 -->
    <div class="fw_content_tablewrap" th:if="${!(type eq 2 or video.type eq 4)}" v-show="comboShow == true" v-loading="loading">
        <div class="fw_content_table">
            <div class="fw_content_table_title">
                <ul class="clearfix">
                    <li style="padding-top: 0;">拍摄套餐包含服务表</li>
                    <li><img th:src="${#request.getAttribute('ctx') + '/static/front/img/icon/A.png'}"></li>
                    <li><img th:src="${#request.getAttribute('ctx') + '/static/front/img/icon/B.png'}"></li>
                    <li><img th:src="${#request.getAttribute('ctx') + '/static/front/img/icon/C.png'}"></li>
                    <li><img th:src="${#request.getAttribute('ctx') + '/static/front/img/icon/D.png'}"></li>
                </ul>
            </div>

            <div class="fw_content_table_city">
                <ul class="clearfix">
                    <li>
                        <el-select v-model="form.location" placeholder="请选择" @change="comboChange">
                            <el-option v-for="item in place" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </li>

                    <!-- price -->
                    <li class="cityName" v-if="comboColumnList != null" v-for="(item, index) in comboColumnList">{{item.price}}</li>

                </ul>
            </div>

            <div v-if="comboGroups != null" class="tab_conwrap">
                <div class="tab_con clearfix">
                    <!-- A B C D -->
                    <table class="tab_con_left" cellspacing="0" cellpadding="0">
                        <tr v-for="(item, index) in comboGroups" :key="index">
                            <th>{{item.groupName}}</th>
                            <td :style="(index % 2 == 0) ? '' : 'background: #fafafa;'">
                                <span v-for="(tag, tindex) in item.tags" :key="tindex">{{tag.tagName}}</span>
                            </td>
                        </tr>
                        <tr>
                            <th style="width:100%; height: 70px; line-height: 70px;">选择套餐</th>
                        </tr>
                    </table>
                    <!-- group-tag -->
                    <table class="tab_con_right" cellspacing="0" cellpadding="0">
                        <tr v-for="(item, index) in comboColumnList[0].groups" :key="index">
                            <td>
                                <span v-for="(tag, tindex) in item.tags" :key="tindex">{{tag.columnText == '' ? ' &nbsp;' : tag.columnText}}</span>
                            </td>
                            <td>
                                <span v-for="(tag, tindex) in comboColumnList[1].groups[index].tags" :key="tindex">{{tag.columnText == '' ? ' &nbsp;' : tag.columnText}}</span>
                            </td>
                            <td>
                                <span v-for="(tag, tindex) in comboColumnList[2].groups[index].tags" :key="tindex">{{tag.columnText == '' ? ' &nbsp;' : tag.columnText}}</span>
                            </td>
                            <td>
                                <span v-for="(tag, tindex) in comboColumnList[3].groups[index].tags" :key="tindex">{{tag.columnText == '' ? ' &nbsp;' : tag.columnText}}</span>
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 70px; line-height: 70px;" v-for="(item, index) in comboColumnList">
                                <a href="javascript:void(0)" v-if="item.value == 1" @click="form.combo = item.id; comboIcon = 1; comboShow = false;">选择A套餐</a>
                                <a href="javascript:void(0)" v-if="item.value == 2" @click="form.combo = item.id; comboIcon = 2; comboShow = false;">选择B套餐</a>
                                <a href="javascript:void(0)" v-if="item.value == 3" @click="form.combo = item.id; comboIcon = 3; comboShow = false;">选择C套餐</a>
                                <a href="javascript:void(0)" v-if="item.value == 4" @click="form.combo = item.id; comboIcon = 4; comboShow = false;">选择D套餐</a>
                            </td>
                        </tr>

                    </table>
                </div>

                <div class="beizhu">
                    <ul class="clearfix">
                        <li style="width: 220px; background: #fafafa; text-align: center; line-height: 140px;;">备注</li>
                        <li style="padding:20px;">
                            <p>1、拍摄时长包含交通时间，超过拍摄时长（定制建议拍摄2天时间），需添加超时费；</p>
                            <p>2、超出拍摄范围拍摄需自付车费；</p>
                            <p>3、特效另加费用；</p>
                            <p>4、10s预告片可发朋友圈（拍摄后三天之内发送预告片，七天之内发送成品）</p>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <div class="modality" th:if="${!(type eq 2 or video.type eq 4)}" v-show="comboShow == true" @click="comboShow = false"></div>

</div>

<!-- 版权信息 -->
<div th:replace="foot :: body"></div>

</body>

<!-- import JavaScript -->
<script type="text/javascript" charset="utf-8" th:src="${#request.getAttribute('ctx') + '/static/front/js/home.js'}"></script>

<script th:inline="javascript">
    var areas = [[${areas}]];
    var areaData = [];
    for (var i in areas) {
        areaData.push({
            label: areas[i].name,
            value: areas[i].id
        })
    }

    var v = new Vue({
        el: '#app',
        data: function () {
            var validateReceiptType = function(rule, value, callback) {
                var flag = v.form.needReceipt == 'true';
                if (flag && !value) {
                    callback(new Error('请选择发票类型'));
                } else {
                    callback();
                }
            }
            var validateDutyNo = function(rule, value, callback) {
                var flag = v.form.needReceipt == 'true';
                // 抬头为公司
                if (flag && v.form.receiptHeadType == 2 && !value) {
                    callback(new Error('请输入税号'));
                } else {
                    callback();
                }
            };
            var validateReceiptHead = function(rule, value, callback) {
                var flag = v.form.needReceipt == 'true';
                // 抬头为公司
                if (flag && v.form.receiptHeadType == 2 && !value) {
                    callback(new Error('请输入公司名称'));
                } else {
                    callback();
                }
            };
            var validateReceiveName = function(rule, value, callback) {
                var flag = v.form.needReceipt == 'true';
                if (flag && !value) {
                    callback(new Error('请输入收票人'));
                } else {
                    callback();
                }
            };
            var validateContactPhone = function(rule, value, callback) {
                var flag = v.form.needReceipt == 'true';
                if (flag && !value) {
                    callback(new Error('请输入联系电话'));
                } else {
                    callback();
                }
            };
            var validatePostStreet = function(rule, value, callback) {
                var flag = v.form.needReceipt == 'true';
                // 纸质发票需要邮寄地址
                if (flag && v.form.receiptType == 1 && !v.form.postAddress) {
                    callback(new Error('请输入邮寄地址'));
                } else {
                    callback();
                }
            };
            var validateContactEmail = function(rule, value, callback) {
                var flag = v.form.needReceipt == 'true';
                if (flag && v.form.receiptType == 2 && !v.form.contactEmail) {
                    callback(new Error('请输入收票电子邮箱'));
                } else {
                    callback();
                }
            }

            return {
                form: {
                    type: [[${type}]],
                    location: 2,
                    executeDates: null,
                    remark: '',
                    videoType: [[${video?.type}]],
                    combo: null,
                    needReceipt: "true",

                    // receipt
                    // 发票类型: 默认纸质发票
                    receiptType: '',
                    // 发票抬头: 默认个人
                    receiptHeadType: '1',
                    receiptHead: '',
                    dutyNo: '',
                    receiptContent: '短视频拍摄',
                    address: '',
                    receiveName: '',
                    contactPhone: '',
                    postAddress: '',
                    postStreet: '',

                    discountcouponId: null,

                    agree: [],
                },

                rules: {
                    location: [
                        {required: true, message: '请输入拍摄地区', trigger: 'change'}
                    ],
                    executeDates: [
                        {required: true, message: '请选择拍摄时间', trigger: 'change'}
                    ],
                    videoType: [
                        {required: true, message: '请选择作品类型', trigger: 'change'}
                    ],
                    agree: [
                        {type: 'array', required: true, message: '请阅读短视频协议, 同意后勾选该选项', trigger: 'change'}
                    ],

                    // receipt
                    receipt: [{
                        receiptType: [
                            {validator: validateReceiptType, message: '请选择发票类型', trigger: 'change'}
                        ],
                    }],
                    receiptType: [
                        {validator: validateReceiptType, message: '请选择发票类型', trigger: 'change'}
                    ],
                    dutyNo: [
                        {validator: validateDutyNo, message: '请输入税号', trigger: 'change'}
                    ],
                    receiptHead: [
                        {validator: validateReceiptHead, message: '请输入公司名称', trigger: 'change'}
                    ],
                    receiveName: [
                        {validator: validateReceiveName, message: '请输入收票人姓名', trigger: 'blur'}
                    ],
                    contactPhone: [
                        {validator: validateContactPhone, message: '请输入收票人联系电话', trigger: 'blur'}
                    ],
                    postStreet: [
                        {validator: validatePostStreet, message: '请输入邮寄地址', trigger: 'blur'}
                    ],
                    contactEmail: [
                        {validator: validateContactEmail, message: '请输入收票电子邮箱', trigger: 'blur'}
                    ]
                },

                loading: false,

                comboShow: false,
                comboIcon: 0,

                receiptTypes: [{
                    value: 1,
                    label: '纸质发票'
                }, {
                    value: 2,
                    label: '电子发票'
                }],

                place: areas,
                areas: areaData,
                videoTypes: [[${videoTypes}]],

                coupons: [[${discountCoupons}]],
                discountCouponIndex: null,

                comboColumnList: [[${comboColumnList}]],
                comboGroups: [[${comboColumnList ne null ? comboColumnList[0].groups : null}]],
                comboGroups1: [[${comboColumnList ne null ? comboColumnList[1].groups : null}]],
                comboGroups2: [[${comboColumnList ne null ? comboColumnList[2].groups : null}]],
                comboGroups3: [[${comboColumnList ne null ? comboColumnList[3].groups : null}]],

                errors: [[${errors}]],

                executePicker: {
                    disabledDate: function(time) {
                        return time.getTime() < Date.now() + (7 * 24 * 60 * 60 * 1000);
                    },
                },
            }
        },

        created: function () {
            var _self = this;
            setTimeout(function () {
                _self.comboChange(_self.form.location);
            }, 2000);
        },

        methods: {
            // 优惠券选择
            discountCouponChange: function (index) {
                this.discountCouponIndex = index;
                this.form.discountcouponId = this.coupons[index].id;
            },

            // 表单提交
            submit: function (formName) {
                var _self = this;

                if (_self.form.type != 2 && _self.form.videoType != 4 && !_self.form.combo) {
                    ELEMENT.Message.info('请选择套餐!');
                    return false;
                }

                if ($.trim(_self.form.remark).length > 300) {
                    ELEMENT.Message.info('备注内容300字以内!');
                    return false;
                }

                _self.$refs[formName].validate(function(valid) {
                    if (valid) {
                        $('#submitForm').submit();
                    } else {
                        try {
                            window.scrollTo(0, $($('.el-form-item__error')[0]).offset().top - 100);
                        } catch (e) {
                            console.log(e);
                        }
                        return false;
                    }
                })
            },

            // 套餐选择
            comboChange: function (city) {
                // 如果订单类型为私人订制或作品类型为宣传片, 则不加载套餐
                if ([[${type eq 2 or video.type eq 4}]]) {
                    return false;
                }
                var _self = this;
                _self.loading = true;
                $.get("/combo/api/list?city=" + city, function (data, status) {
                    _self.loading = false;
                    if (data.status == 200) {
                        _self.comboColumnList = data.data.comboColumnList,
                        _self.comboGroups = _self.comboColumnList[0].groups,
                        _self.comboGroups1 = _self.comboColumnList[1].groups,
                        _self.comboGroups2 = _self.comboColumnList[2].groups,
                        _self.comboGroups3 = _self.comboColumnList[3].groups
                    } else {
                        _self.comboColumnList = null;
                        _self.comboGroups = null;
                        _self.comboGroups1 = null;
                        _self.comboGroups2 = null;
                        _self.comboGroups3 = null;
                        ELEMENT.Message.error(data.error);
                    }
                });

            },

            // 备注输入监控
            remarkValid: function () {
                if ($.trim(this.form.remark).length > 300) {
                    this.form.remark = this.form.remark.substring(0, 300);
                }
            },

            // 街道地址监控
            streetValid: function () {
                if ($.trim(this.form.postStreet).length > 100) {
                    this.form.postStreet = this.form.postStreet.substring(0, 100);
                }
            }
        }

    })
</script>
</html>
